<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<style>
			div{
				margin: 5px;
			}
			#msg{
				color: red;
			}
			/* label和span标签默认不换行，宽度设置无效 */
		</style>
		<script>
			function doLogin(){
				var msg=document.getElementById("msg");
				var username=document.getElementById("username").value;
				alert(msg.innerHTML="欢迎"+username+"登录！");
				
			}
			function doClear(){
				document.getElementById('username').value='';
				document.getElementById('password').value='';
				
			}
		</script>
	</head>
	<body>
		<div id="container">
			<div id="msg"></div>
			<section>
				<fieldset>
					<legend>登录</legend>
					<div>
						<label>用户名：</label>
						<input type="text" name="username" id="username" />
					</div>
					
					<div>
						<label>密　码：</label>
						<input type="password" name="password"  id="password"/>
					</div>
					
					<div>
						<button onclick="doLogin()">登录</button>
						<button onclick="doClear()">清除</button>
					</div>
				</fieldset>
			</section>
		</div>
			
	</body>
</html>
<!-- <section></section>段落标签 -->
<!-- <fiekdset>框，文字写在中间
 <legend>文字标签
 <label>标签文字放中间-->

   
   
   
   
   
   
   
   
   